<template>
  <view class="min-h-screen bg-[#f0f0f0] pb-4">
    <!-- 顶部图片区域 -->
    <image class="w-full h-96 object-cover" src="@/assets/imgs/shan.png" mode="aspectFill"></image>

    <image class="w-full h-[500rpx] object-cover absolute left-0 top-40 z-20" src="@/assets/imgs/shui.png" mode="aspectFill"></image>

    <!-- 内容卡片 -->
    <view class="w-[660rpx] mx-auto p-4 bg-white mt-[-172px] rounded-xl shadow-lg relative z-10 mb-10">
      <view class="flex items-center justify-center mx-auto w-[240rpx] h-[72rpx] relative z-10 border-x-8 border-[var(--color-m1)] bg-[var(--color-m1)] text-[32rpx] text-[var(--color-m2)]"
        >供养证书</view
      >
      <view class="text-gray-800 text-base mb-4 border border-[var(--color-m1)] pt-10 pb-4 px-4 mt-[-36rpx]">
        相传有一位菩萨在悬崖上挖了八个坑，每个坑里都有清澈甘甜的水。这八个坑分别代表着八种功德，包括布施、持戒、忍辱、精进、禅定、智慧、方便和般若。这些功德就像水一样，滋润着人们的心灵，给予人们福利和幸福
      </view>

      <view class="w-full" v-if="list.length > 0">
        <image :src="getFullPath(item.image)" v-for="(item, index) in list" :key="index" class="w-full" mnode="widthFix"></image>
      </view>
      <empty v-else />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import http from "@/utils/http";
import Empty from "@/components/empty/index.vue";
import { getFullPath } from "@/utils/config";

const list = ref([]);

onMounted(() => {
  console.log("onMounted");
  getGoods();
});

function getGoods() {
  http
    .post("/index.php/index/api/index", {
      Func: "getCertificate",
      data: {
        startpage: 1,
        pagesize: 100,
      },
    })
    .then((res) => {
      console.log("res", res);
      if(res?.error == 0) {
        list.value = res.data;
      }
    });
}
</script>

<style scoped>
/* 自定义样式 */
</style>
